<template>
  <div>
    <header class="articleheader">
      <div class="headerset">
        <p class="goback" @click="gobackFn"> <i class="el-icon-back"></i> | 返回</p>
        <h1>{{article.title}}</h1>
        <span><img src="../../assets/time.png" alt="" class="img_icon"> {{ article.publish_time }}</span> &nbsp;
        <span class="sorcefrom">来源：易儿宝母婴闲置用品交易平台</span>
        <span @click="addLike(article.id)" v-if="article.like_num === 0"><img src="../../assets/dianzan.png" alt="" class="img_icon">{{article.like_num}}赞</span>
        <span @click="addLike(article.id)" v-else><img src="../../assets/yidianzan.png" alt="" class="img_icon">{{article.like_num}}赞</span>
        <span @click="addCollect(article.id)" v-if="article.collect_num === 0"><img src="../../assets/shoucang.png" alt="" class="img_icon1">{{ article.collect_num }}收藏</span>
        <span @click="addCollect(article.id)" v-else><img src="../../assets/yishoucang.png" alt="" class="img_icon1">{{ article.collect_num }}收藏</span>
      </div>
    </header>
    <article class="articledetail">
      <p class="content" v-html="article.content"></p>
    </article>
  </div>
</template>

<script>
import { addLikeAPI, addCollectAPI, getarticledetailbyidAPI } from '@/api'
import { mapMutations } from 'vuex'
export default {
  name: 'zixun-detail',
  data () {
    return {
    }
  },
  computed: {
    article () {
      return this.$store.state.articledetail
    }
  },
  methods: {
    gobackFn () {
      this.$router.go(-1)
    },
    ...mapMutations(['getarticledetail']),
    // 点赞
    async addLike (id) {
      const { data } = await addLikeAPI(id)
      if (data.status !== 0) return this.$message.error(data.message)
      getarticledetailbyidAPI(id).then(({ data }) => {
        this.getarticledetail(data.data)
      })
    },
    async addCollect (id) {
      const { data } = await addCollectAPI(id)
      if (data.status !== 0) return this.$message.error(data.message)
      getarticledetailbyidAPI(id).then(({ data }) => {
        this.getarticledetail(data.data)
      })
    }
  }
}
</script>

<style :scoped>
  .articleheader {
    display: flex;
    justify-content: center;
  }
  .headerset {
    width: 70%;
    box-shadow: 0 1px rgba(0, 0, 0, 0.2);
    padding-bottom: 10px;
  }
  .img_icon {
    width: 1.5em;
    height: 1.5em;
    vertical-align:-0.35em;
    margin-right: 1px;
  }
  .articledetail {
    width: 70%;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
  }
  .content {
    font-size: 18px;
    color: #404040;
  }
  .content p {
    text-indent: 2em;
  }
  .goback:hover {
    opacity: .6;
    color: gray;
    cursor: pointer;
  }
  .sorcefrom {
    margin-right: 10px;
  }
  .img_icon {
    width: 1.5em;
    height: 1.5em;
    vertical-align:-0.35em;
    margin-right: 1px;
  }
  .img_icon1 {
    width: 2em;
    height: 2em;
    vertical-align:-0.55em;
    margin-right: 1px;
  }
</style>
